<script setup>
import { computed } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'

const props = defineProps({
  type: {
    type: String,
    default: 'info',
  },
  title: {
    type: String,
    required: true,
  },
  description: {
    type: String,
    default: '',
  },
  resultMessage: {
    type: String,
    default: '',
  },
  errorList: {
    type: Array,
    default: () => [],
  },
  showBack: {
    type: Boolean,
    default: true,
  },
  showView: {
    type: Boolean,
    default: true,
  },
  backText: {
    type: String,
    default: '返回',
  },
  viewText: {
    type: String,
    default: '查看',
  },
})

const emit = defineEmits(['back', 'view'])
const handleBack = () => emit('back')
const handleView = () => emit('view')

const iconMap = {
  success: 'ix:success-filled', // '&#xe617;'
  fail: 'ix:namur-failure-filled', // '&#xe665;'
  info: 'ix:about-filled',
  warning: 'ix:alarm-filled',
}

const colorMap = {
  success: 'text-green-500',
  fail: 'text-red-500',
  info: 'text-blue-500',
  warning: 'text-yellow-500',
}

const defaultIcon = computed(() => iconMap[props.type || 'info'] || '✔')
const iconColor = computed(() => colorMap[props.type || 'info'] || 'text-gray-500')
const typeClass = computed(() => `result-${props.type || 'default'}`)

const showBack = computed(() => props.showBack !== false)
const showView = computed(() => props.showView !== false)

const backText = computed(() => props.backText || '返回')
const viewText = computed(() => props.viewText || '查看')
</script>

<template>
  <div
    class="w-full text-center px-4 sm:px-8 lg:px-24 xl:px-48 2xl:px-96 py-10"
    :class="typeClass"
  >
    <!-- 图标 -->
    <div class="block mt-[5vh] text-[60px] sm:text-[80px]  text-center">
      <SvgIcon class="" :class="iconColor" :name="defaultIcon" />
      <slot name="icon" />
    </div>

    <!-- 标题 -->
    <h1 class="mt-1 text-[24px] sm:text-[30px] font-medium text-gray-900 dark:text-gray-100">
      {{ title }}
    </h1>

    <!-- 描述 -->
    <p v-if="description" class="mt-4 text-base text-gray-500 dark:text-gray-400">
      {{ description }}
    </p>

    <!-- 结果内容区（插槽 或 默认） -->
    <div
      v-if="resultMessage || (type === 'fail' && errorList?.length)"
      class="mt-8 bg-gray-100 dark:bg-gray-800 p-6 rounded text-left text-sm text-gray-600 dark:text-gray-300"
    >
      <!-- 插槽优先，用户可以完全覆盖默认内容 -->
      <slot>
        <p v-if="resultMessage">
          {{ resultMessage }}
        </p>
        <div v-else-if="type === 'fail' && errorList?.length" class="text-base">
          <p>您提交的内容有如下错误：</p>
          <p
            v-for="(item, index) in errorList"
            :key="index"
            class="flex items-center mt-2"
          >
            <SvgIcon class="w-4 h-4 mr-2 text-red-500" name="ix:error-filled" />
            {{ item }}
          </p>
        </div>
      </slot>
    </div>

    <!-- 按钮区 -->
    <div class="mt-12 flex flex-wrap gap-3 justify-center">
      <slot name="back">
        <el-button v-if="showBack" v-ripple @click="handleBack">
          {{ backText }}
        </el-button>
      </slot>
      <slot name="view">
        <el-button v-if="showView" v-ripple type="primary" @click="handleView">
          {{ viewText }}
        </el-button>
      </slot>
      <slot name="extra-buttons" />
    </div>
  </div>
</template>

<style scoped>
</style>
